<template>
    <div class="gb-footer">
      <ul class="flex-box">
        <li v-for="(item,index) in lists" :key="index" :class="{active:$route.path===item.link}" >
          <router-link :to="item.link">
            <p :class="[index===2?'link-to-flsc':'']">
              <i class="icon iconfont-gb" :class="item.icon"></i>
              <span v-if="item.name === '购物车'&&cartNum">{{cartNum}}</span>
            </p>
            <h6>{{item.name}}</h6>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      activeIndex: 0,
      lists: [
        {
          icon: 'icon-gb-zhuye',
          name: '首页',
          link: '/'
        },
        {
          icon: 'icon-gb-fenlei',
          name: '分类',
          link: '/category'
        },
        {
          icon: 'icon-gb-fuliquan',
          name: '福利商城',
          link: '/fulipage'
        },
        {
          icon: 'icon-gb-gouwuche',
          name: '购物车',
          link: '/cart'
        },
        {
          icon: 'icon-gb-icon_pc',
          name: '我的',
          link: '/mine'
        }
      ]
    }
  },
  components: {},
  computed: {
    ...mapGetters({
      cartNum: 'cart/cartNum'
    })
  },
  methods: {
    // activeNav(path) {
    //   console.log(path)
    //   // this.$router.replace(path)
    // }
  },
  created() {},
  mounted() {
    //Android
    //获取原窗口的高度
    let originalHeight = document.documentElement.clientHeight || document.body.clientHeight
    window.onresize = () => {
      //键盘弹起与隐藏都会引起窗口的高度发生变化
      let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
      if (originalHeight - resizeHeight > 140) {
        this.footerShow = false
      } else {
        this.footerShow = true
      }
    }
  }
}
</script>
<style scoped lang="scss">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.iconfont-gb {
  font-family: 'iconfont-gb' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-gb-icon_pc:before {
  content: '\e607';
}
.icon-gb-zhuye:before {
  content: '\e60f';
}
.icon-gb-fenlei:before {
  content: '\e601';
}
.icon-gb-gouwuche:before {
  content: '\e70b';
}
.icon-gb-fuliquan:before {
  content: '\e60c';
}
.gb-footer {
  width: 100%;
  background: #fff;
  height: 57px;
  position: fixed;
  z-index: 66;
  bottom: 0;
  left: 0;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
  ul {
    height: 100%;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    text-align: center;
    li {
      font-size: 12px;
      width: 60px;
      color: #333;
      text-align: center;
      a {
        color: #333;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
      p {
        font-size: 28px;
        margin-top: -6px;
        margin-bottom: 3px;
        text-align: center;
        color: #999;
        position: relative;
        i {
          font-size: 22px;
          line-height: 28px;
        }
        span {
          position: absolute;
          left: 50%;
          margin-left: 2px;
          top: 4px;
          width: 12px;
          height: 12px;
          border-radius: 10px;
          background: #f00;
          font-size: 10px;
          color: #fff;
          text-align: center;
          line-height: 14px;
        }
        &.link-to-flsc {
          width: 42px;
          height: 42px;
          border-radius: 100%;
          display: inline-block;
          line-height: 42px;
          margin-top: -18px;
          margin-bottom: 6px;
          color: #fff;
          background: -webkit-linear-gradient(270deg, #ff617f, #df4eae); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(270deg, #ff617f, #df4eae); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(270deg, #ff617f, #df4eae);
          /* Firefox 3.6 - 15 */
          background: linear-gradient(270deg, #ff617f, #df4eae); /* 标准的语法 */
          i {
            line-height: 42px;
            font-size: 20px;
            position: relative;
            top: -5px;
            left: 1px;
            color: rgb(255, 247, 219);
            transition: top 0.1s ease;
            -webkit-transition: top 0.1s ease;
          }
        }
      }
      &.active {
        p {
          i {
            &::before {
              background: -webkit-linear-gradient(left bottom, #0064d6, #46c3f8);
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          &.link-to-flsc {
            i {
              top: -4px;
              &::before {
                position: relative;
                content: '\e64e';
                color: #000;
                background: #fff;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          i.icon-gb-zhuye::before {
            content: '\e603';
          }
          i.icon-gb-fenlei::before {
            content: '\e604';
          }
          i.icon-gb-gouwuche::before {
            content: '\e605';
          }
          i.icon-gb-icon_pc::before {
            content: '\e606';
          }
        }
      }
    }
  }
}
</style>
